<template>
  <div>
    <van-nav-bar
      title="添加操行"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form @failed="onFailed">
      <van-field v-model="formData.class_name" is-link readonly name="picker" label="班级" placeholder="请选择班级"
        @click="showClass = true" />
      <van-popup v-model:show="showClass" position="bottom">
        <van-picker :columns="classes" @confirm="onConfirmClass" @cancel="showClass = false" />
      </van-popup>


      <van-field v-model="formData.student_name" is-link readonly name="picker" label="学生" placeholder="请选择学生"
        @click="showStudent = true" />
      <van-popup v-model:show="showStudent" position="bottom">
        <van-picker :columns="students" @confirm="onConfirmStudent" @cancel="showStudent = false" />
      </van-popup>

      <van-field v-model="formData.scoring_type_name" is-link readonly name="picker" label="操行类型" placeholder="操行类型"
        @click="showType = true" />
      <van-popup v-model:show="showType" position="bottom">
        <van-picker :columns="scorings" @confirm="onConfirmType" @cancel="showType = false" />
      </van-popup>

      <van-field v-model="formData.scoring_rule_name" is-link readonly name="picker" label="操行规则" placeholder="操行类型"
        @click="showRule = true" />
      <van-popup v-model:show="showRule" position="bottom">
        <van-picker :columns="scorings" @confirm="onConfirmRule" @cancel="showRule = false" />
      </van-popup>

      <van-field name="uploader" label="请假图片">
        <template #input>
          <van-uploader v-model="formData.images" />
        </template>
      </van-field>
      <!-- <van-field v-model="formData.start_time" is-link readonly name="calendar" label="起始时间" placeholder="点击选择日期"
        @click="showCalendar1 = true" />
      <van-calendar v-model:show="showCalendar1" @confirm="onConfirmStart" />

      <van-field v-model="formData.end_time" is-link readonly name="calendar" label="结束时间" placeholder="点击选择日期"
        @click="showCalendar2 = true" :rules="[{ validator, message: '请假原因必填' }]"/>
      <van-calendar v-model:show="showCalendar2" @confirm="onConfirmEnd" /> -->

      <van-cell-group>
        <van-field v-model="formData.scoring_notes" rows="2" autosize label="备注" type="textarea" maxlength="50"
          placeholder="请输入留言" show-word-limit :rules="[{ validator, message: '备注信息必填' }]"/>
      </van-cell-group>

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          添加
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';


const formData = reactive({
  class_id: -1,
  class_name: '',
  student_id: -1,
  student_name: '',
  scoring_notes: '评分结果备注',
  images: [],
  scoring_rule_id: -1,
  scoring_rule_name: '',
  scoring_type_id: -1,
  scoring_type_name: '',
})

const showClass = ref(false);
const showStudent = ref(false);
const showType = ref(false);
const showRule = ref(false);


const classes = [
  { text: '1班', value: 'Hangzhou' },
  { text: '2班', value: 'Ningbo' },
  { text: '3班', value: 'Wenzhou' }
];

const students = [
  { text: '小花', value: 'Hangzhou' },
  { text: '小明', value: 'Ningbo' },
  { text: '小李', value: 'Wenzhou' }
];
const scorings = [
  { text: '病假', value: '1' },
  { text: '事假', value: '2' },
  { text: '其他', value: '3' }
];

const validator = (str) => {
  return str.trim().length > 0
}

const onConfirmClass = ({ selectedOptions }) => {
  formData.teacher_id = selectedOptions[0]?.value;
  formData.class_name = selectedOptions[0]?.text;
  showClass.value = false;
};

const onConfirmStudent = ({ selectedOptions }) => {
  formData.student_id = selectedOptions[0]?.value;
  formData.student_name = selectedOptions[0]?.text;
  showStudent.value = false;
};


const onConfirmType = ({ selectedOptions }) => {
  formData.scoring_type_id = selectedOptions[0]?.value;
  formData.scoring_type_name = selectedOptions[0]?.text;
  showType.value = false;
};

const onConfirmRule = ({ selectedOptions }) => {
  formData.scoring_rule_id = selectedOptions[0]?.value;
  formData.scoring_rule_name = selectedOptions[0]?.text;
  showRule.value = false;
};

const onFailed = (errorInfo) => {
      console.log('failed', errorInfo);
    };
</script>
